<!DOCTYPE html>
<html>

<head>
	@@include('../_include/common-header.html')
	<link rel="stylesheet" href="third/swiper-9.4.1/swiper-bundle.min.css">
	<link rel="stylesheet" type="text/css" href="css/main.min.css" />
</head>

<body class="hidden">
	@@include('../_include/navigation.html')

	<div class="explore-btn J-explore-btn" data-targetnum='1' data-flag="0">
		<span class="icon-explore-circle"></span>
		<span class="txt">探索</span>
	</div>
	<div class="swiper index-swiper">
		<div class="swiper-wrapper">
			<!-- 1 -->
			<div class="swiper-slide scenes-item1">
				<h2 class="slogan">
					<span class="cn" data-swiper-parallax="50%"
						data-swiper-parallax-opacity="0.1">蜂叹专注于品牌管理与深度创意执行，为客户在人工智能时代，创造独特品牌体验。</span>
					<span class="en" data-swiper-parallax="70%" data-swiper-parallax-opacity="0.2">
						Fengtan focuses on brand management and in-depth creative execution, creating unique brand experiences for clients in the era of artificial intelligence
					</span>
				</h2>
				<div class="video-bg-box">
					<div class="video-bg">
						<video muted autoplay="autoplay" src="video/kv-1.mp4" class="video-tvc" id="video-tvc" x-webkit-airplay='true' x5-video-player-type='h5'
						x5-video-player-fullscreen='true' playsinline data-object-fit="">抱歉，您的浏览器不支持内嵌视频</video>
					</div>
				</div>
			</div>
			<!-- 2 -->
			<div class="swiper-slide scenes-item2">
				<!-- <div class="color-circle" data-swiper-parallax-scale="0" data-swiper-parallax-opacity="0.1"> <img
						src="images/color-circle.png"> </div> -->
				<div class="txt" data-swiper-parallax="50" data-swiper-parallax-opacity="0">
					<p><span id="textBox1"></span><span id="printCursor1" class="print-cursor">_</span></p>
				</div>
				<div class="scenes-bg scenes-bg2 ani-item" data-swiper-parallax-scale="3"></div>
				<!-- data-swiper-parallax-y="20%"  -->
				<div class="scenes-bg scenes2-hills" data-swiper-parallax-scale="2" data-swiper-parallax-opacity="0.75">
				</div>
			</div>
			<!-- 3 -->
			<div class="swiper-slide scenes-item3">
				<div class="txt" data-swiper-parallax="50" data-swiper-parallax-opacity="0">
					<p><span id="textBox2"></span><span id="printCursor2" class="print-cursor">_</span></p>
				</div>
				<div class="scenes-bg silhouette"></div>
			</div>
			<!-- 4 -->
			<div class="swiper-slide scenes-item4">
				<div class="txt" data-swiper-parallax="50" data-swiper-parallax-opacity="0">
					<p><span id="textBox3"></span><span id="printCursor3" class="print-cursor">_</span></p>
				</div>
				<div class="scenes-bg scenes-bg4"></div>
			</div>
			<!-- 5 -->
			<div class="swiper-slide scenes-item5">
				<div class="scenes-bg">
					<div class="scenes-bg scenes-bg5">
						<div class="font-T" data-swiper-parallax="-150%" data-swiper-parallax-scale="4"
							data-swiper-parallax-opacity="0"></div>
					</div>
					<div class="scenes-bg scenes-bg5s"></div>
				</div>
				<div class="txt" data-swiper-parallax="50" data-swiper-parallax-opacity="0">
					<p><span class="think"><img src="images/think.png" /></span></p>
					<p><span id="textBox4"></span><span id="printCursor4" class="print-cursor">_</span></p>
				</div>
			</div>
			<!-- 6 -->
			<div class="swiper-slide scenes-item6">
				<div class="scenes-bg scenes-bg6"></div>
				<div class="txt" data-swiper-parallax="50" data-swiper-parallax-opacity="0">
					<p><span id="textBox5"></span><span id="printCursor5" class="print-cursor">_</span></p>
					<!-- <p>我们有时代的局限，但是并不妨碍我们参与了这个时代，并留下印记 <span class="animated fadeIn infinite">_</span></p> -->
				</div>
				<!-- <div class="partners-group">
					<div class="partners-scrolling anime-direction-r">
						<div class="scrolling-item"><img src="images/partners-img1.png"></div>
						<div class="scrolling-item"><img src="images/partners-img1.png"></div>
					</div>
					<div class="partners-scrolling anime-direction-l">
						<div class="scrolling-item"><img src="images/partners-img2.png"></div>
						<div class="scrolling-item"><img src="images/partners-img2.png"></div>
					</div>
					<div class="partners-scrolling anime-direction-r">
						<div class="scrolling-item"><img src="images/partners-img3.png"></div>
						<div class="scrolling-item"><img src="images/partners-img3.png"></div>
					</div>
					<div class="partners-scrolling anime-direction-l">
						<div class="scrolling-item"><img src="images/partners-img4.png"></div>
						<div class="scrolling-item"><img src="images/partners-img4.png"></div>
					</div>
					<div class="partners-scrolling anime-direction-r">
						<div class="scrolling-item"><img src="images/partners-img1.png"></div>
						<div class="scrolling-item"><img src="images/partners-img1.png"></div>
					</div>
				</div> -->
			</div>
			<div class="swiper-slide scenes-item7">
				<div class="inner-con" data-swiper-parallax="-200%" data-swiper-parallax-opacity="0.1">
					<h3>发现&思考</h3>
					<p class="info"><span id="textBox6"></span><span id="printCursor6" class="print-cursor">_</span></p>
					<!-- <p class="info">
						通过将数学的精确性与哲学的深邃思考融合在一起，我们开辟了品牌新的可能性，挑战传统，引领变革。
					</p> -->
					<!-- <p class="info">人们不断的追求，却渐渐遗忘初心。<br />记得去看一本书，听一首歌，吃一顿饭，踢一场球，看一场电影。
						<br /> 在蔚蓝暗淡的蓝点上，我们一起做一些有趣的事……
					</p> -->
					<a href="joinus.html" target="_blank" class="contact-btn">接触我们</a>
				</div>
				<div class="person">
					<div class="person-front" data-swiper-parallax-y="-30%" data-swiper-parallax-opacity="0.5"> <img
							src="images/person-7-front.png" /></div>
					<div class="FT-circle" data-swiper-parallax-scale="0" data-swiper-parallax-y="-20%"
						data-swiper-parallax-opacity="0"><img src="images/FT-circle.png" /></div>
					<img src="images/person-7.png" data-swiper-parallax-y="-30%" data-swiper-parallax-opacity="0.5" />
				</div>
			</div>
		</div>
		<div class="swiper-pagination"></div>
	</div>
	<div class="copyright fixed">
		版权所有 <a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备10211359号-2</a>
	</div>

	<div class="bot-link J-contact">突破极限 续写传奇</div>

	<!-- 联系我们弹框模块 start -->
	@@include('../_include/contact-pop.html')
	<!-- // 联系我们弹框模块 end -->

	<script type="text/javascript" src="third/jquery-2.1.4.min.js"></script>
	<script src="third/swiper-9.4.1/swiper-bundle.min.js"></script>
	<script src="third/gsap3.11.5/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/TextPlugin.min.js"></script>
	<script src="third/anime.min.js"></script>
	<script src="third/stars.js"></script>
	<script src="js/common.min.js"></script>
	<script>
		$(function () {
			var indexVideo = document.getElementById('video-tvc'); //获取视频video
			const swiperSpeed = 1500;

			//console.log(indexVideo)

			const swiperData = [{
				speed: swiperSpeed,
				btnTxt: '探索'
			},
			{
				speed: swiperSpeed,
				btnTxt: '追问',
				content: '我们像天文学家一样探索品牌的奥秘，将每个咨询项目视为揭示品牌核心力量的独特探究。'
			},
			{
				speed: swiperSpeed,
				btnTxt: '求真',
				content: '我们的创意过程仿佛量子纠缠，将看似矛盾的元素——艺术与科技、传统与创新——交织在一起，创造出超越常规的解决方案。'
			},
			{
				speed: swiperSpeed,
				btnTxt: '进化',
				content: '正如哲学家不断追求智慧和真理，我们不断追求设计的深层意义，挖掘每个品牌背后的哲学和故事。'
			},
			{
				speed: swiperSpeed,
				btnTxt: '视角', // 印记
				content: '我们不仅是咨询师、设计师，更是思想家，用交叉学科的知识和经验来丰富每一个创意，从而给客户带来全新的视角。'
			},
			{
				speed: swiperSpeed,
				btnTxt: '洞察',
				content: '我们相信像物理学那样的严谨思维和像哲学那样的深刻洞察，是推动创新和卓越设计的双引擎。'
			},
			{
				speed: swiperSpeed,
				btnTxt: '思考',
				content: '通过将数学的精确性与哲学的深邃思考融合在一起，我们开辟了品牌新的可能性，挑战传统，引领变革。'
			},
			]
			var circleBtn = $('.J-explore-btn');


			// 合作伙伴logo循环动画
			// var partnersLogoAnimeR = anime({
			// 	targets: '.anime-direction-r .scrolling-item',
			// 	translateX: [0, '100%'],
			// 	easing: 'linear',
			// 	loop: true,
			// 	duration: 20000,
			// 	autoplay: false
			// });

			// var partnersLogoAnimeL = anime({
			// 	targets: '.anime-direction-l .scrolling-item',
			// 	translateX: ['100%', '0'],
			// 	easing: 'linear',
			// 	loop: true,
			// 	duration: 20000,
			// 	autoplay: false
			// });

			// 星空背景模糊滤镜动画
			var filterTl = gsap.timeline({
				defaults: {
					duration: swiperSpeed,
					//ease: "power1.out"
				}
			});

			var mainSwiper = new Swiper('.index-swiper', {
				//initialSlide: 5,
				//direction: 'vertical', // 垂直切换选项
				loop: false, // 循环模式选项
				speed: swiperSpeed,
				//noSwiping : true,
				parallax: true, // 开启视差
				longSwipesRatio: 0.2,
				mousewheel: true,
				effect: "creative",
				// autoplay: {
				// 	delay: 4000,
				// 	disableOnInteraction: false
				// },
				pagination: {
					el: ".swiper-pagination",
					// clickable: true,
					type: 'progressbar',
				},
				creativeEffect: {
					prev: {
						shadow: true,
						origin: "left center",
						translate: ["-10%", 0, -200],
						rotate: [0, 100, 0],
					},
					next: {
						origin: "right center",
						translate: ["10%", 0, -200],
						rotate: [0, -100, 0],
					},
				},
				on: {
					init: function () {
						//  this.emit('slideChangeTransitionEnd');
						var tl1 = gsap.timeline({
							defaults: {
								duration: 4,
								ease: "power1.out"
							}
						});
						tl1.to(".slogan", {
							scale: 1,
							opacity: 1,
							onComplete: () => {
								//console.log('首页初始化完成')
							}
						})
					},
					slideChangeTransitionStart: function () {
						//console.log(this.activeIndex);
						// 出场动

						//console.log(this.previousIndex + "::" + this.activeIndex);
						if (this.realIndex === 0) { // 第一屏
							indexVideo.play() // 重新播放
						}

						//
						//document.querySelector('.print-cursor').style.opacity = 1 // 显示出光标
						if (this.realIndex === 1) {
							console.log('动画滤镜filter模糊变清晰')
							$('.scenes-bg2').addClass('enter')
						} else {
							$('.scenes-bg2').addClass('outer')
						}

						circleBtn.addClass('aniCircle');
						// 第六场景
					},
					slideChangeTransitionEnd: function () {

						$('#textBox1,#textBox2,#textBox3,#textBox4,#textBox5,#textBox6').html('') // 打印之前容器
						$('#printCursor1,#printCursor2,#printCursor3,#printCursor4,#printCursor5,#printCursor6').css('opacity', 1) //显示光标

						var tl = gsap.timeline({
							defaults: {
								duration: 5,
								//ease: "power1.out"
							}
						});

						circleBtn.find('.txt').html(swiperData[this.activeIndex].btnTxt); // 按钮文字切换
						circleBtn.data('targetnum', this.activeIndex + 1);
						circleBtn.removeClass("aniCircle");

						//console.log(this.slides.length);

						//console.log(this.realIndex)

						if (this.activeIndex == this.slides.length - 1) {
							circleBtn.data("flag", 1); // 按钮切换关闭
						} else {
							circleBtn.data("flag", 0)
						}

						// console.log(swiperData[this.realIndex].content)

						if (this.realIndex === 1) {
							console.log('动画滤镜filter清晰变模糊')
							$('.scenes-bg2').removeClass('enter')
						} else {
							$('.scenes-bg2').removeClass('outer')
						 }

						if (this.realIndex !== 0) {
							tl.to(`#textBox${this.realIndex}`, {
								text: {
									value: `${swiperData[this.realIndex].content}`, // 要显示的文本 //Hello, ScrambleText!
									scrambleText: 'random', // 使用 "random" 进行混淆或 "chars" 进行解混淆
								},
								onComplete: () => {
									console.log(`#printCursor${this.realIndex}`)
									if ($(`#printCursor${this.realIndex}`).length < 1) return false
									document.querySelector(`#printCursor${this.realIndex}`).style.opacity = 0
								}
							})
						} else {
							console.log('首屏不需要字幕打印特效')
						}

					},
					sliderMove: function () {
						var _diff = this.touches.diff;
					},
				}
			})
			//
			// 按钮控制
			circleBtn.click(function () {
				var $this = $(this),
					_idx = $this.data("targetnum"),
					_flag = $this.data("flag");
				if (_flag == 0) {
					var _speed = swiperData[_idx].speed
					mainSwiper.slideTo(_idx, _speed, true);
				} else {
					//window.location.href= 'about.html'
					window.open("about.html", "_blank");
					return false
				}

			})

		})
	</script>

</body>

</html>